/**
图标选择组件

  可以修改/constant/icons.js,增加或减少图标
属性：
  icon：String 当前选择的图标
 */
<template>
  <div >
    <div class="icon-select">
      <div class="icon-body" name="icon-select" @click="select(-1,$event)">
        <i :class="iconStr"></i>
      </div>
    </div>
    <transition name="el-zoom-in-top">
      <div v-show="showPicker" class="picker">
        <el-row
          v-for="i in Math.ceil(icons.length / 8)"
          :key="i"
        >
          <el-col :span="3" v-for="j in 8" :key="i + '-' + j">
            <div
              v-if="typeof icons[(i - 1) * 8 + j] != 'undefined'"
              class="icon-body"
              @click="select((i - 1) * 8 + j)"
              name="icon-select"
              style="margin-top:5px;margin-bottom:5px;margin-left:5px;"
            >
              <i name="icon-select" :class="icons[(i - 1) * 8 + j]" />
            </div>
          </el-col>
        </el-row>
      </div>
    </transition>
  </div>
</template>

<script>
import icons from "../../constant/icons.js";
export default {
  model:{
    prop: "icon",
    methods: ["select"],
  },
  props:{
    icon:String
  },
  data() {
    return {
      showPicker: false,
      icons: icons.icons,
      iconStr: this.icon||'el-icon-setting',
    };
  },
  methods: {
    select(i,e) {
      //TODO: 可以根据e.target.offsetLeft、offsetTop值计算picker的显示位置
      // console.log(e)
      if (i > 0) {
        this.iconStr = this.icons[i];
        this.$emit('select',this.iconStr,i)
      }
      this.showPicker = !this.showPicker;
      this.$emit('input',this.iconStr)
    },
  },
  created(){
    const that=this
    document.addEventListener('click',function(e){
      if (e.target.className!='icon-body' && e.target.parentElement.className!='icon-body'){
        that.showPicker=false
      }
    })
  }
};
</script>

<style lang="less" scoped>
.icon-select {
  width: 30px;
  height: 30px;
  padding: 4px;
  border: #ececec solid 1px;
  border-radius: 5px;
  color: #4590bf;
}
.icon-body {
  background-color: #ececec;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 24px;
}
.picker {
  background-color: #fff;
  position: absolute;
  width: 360px;
  height: 400px;
  border: #ececec solid 1px;
  border-radius: 5px;
  z-index: 9999;
  overflow: auto;
  color: #4590bf;
}
</style>
